Scrapbox機能拡張から本体開発へ (daiiz)

Scrapbox Drinkup 2 Xmas Edition でのLT資料

こんばんは

daiiz.icon daiiz (飯塚大貴)

Notaで/daiiz/スクボ.icon Scrapboxを作っています

/daiiz/Scrapboxとのなれそめ

ユーザー、インターンを経て、今月入社しました

マイブーム

自作スクボビューワーで横2画面構成にして、Streamを常に流しておくこと

左側で編集しているプロジェクトと別のStreamを流しておくのも、更新に気づけて便利です

https://gyazo.com/789ceddd53e85a3080c4b6f209b448e2

Scrapboxを好きなだけ拡張していく話をします

5分しかないですが二部構成です

UserScriptから始まり、Chrome拡張機能をリリースする話

インターンに参加してさらに拡張し、入社した話

見た目のカスタマイズや独自機能を付けたい

UserCSS、UserScriptでできる

/help-jp/UserCSS

projectの見た目をカスタマイズできる

/help-jp/UserScript

少々上級者向けの機能

自分に対してのみコードを実行できる

自分のページにコードを書けば、お手軽に実験できる

UserScriptドハマリ時期

/help-jp/APIを使って色々遊んでいた

Scrapbox上でプログラミングできる体験が新鮮だった

書いては実行して試す、の繰り返しが超簡単にできる

快適！

どうなるか？

ブラウザでのエラーを収集しているSentryのログに daiiz が入ったURLが大量に出てくる

Slackに流れてきて気付いてびっくり

clientでのスクボ本体のエラーが見えない状況

やばい

UserScriptのエラーを送信しないようにしたのがインターンでの初仕事

落ち着きを取り戻した

カスタマイズを共有したい

Drinkup 1 での交流でカスタマイズ話を沢山聞けて面白かった

/customizeを作った

CSSやJavaScriptのコードを見せ合う場所が欲しい

/shokai/工夫は共有されるべきに共感した

動いている様子をGyazo GIFで撮ったものを眺めているだけでも楽しい

コードが多少わからなくても、真似するものがあれば、自分流に調整できる

madobe.iconさんの /scrasobox が素晴らしい

新作が共有されると、毎回見に行って感激しています daiiz.icon

もっと実験しやすく、コードの更新を素早く伝えたい

Chrome拡張機能を作った

/customize/daiiz製のChrome拡張機能から入手可能

ストアを更新すると各clientが自動で最新状態が保たれるのがいい

機能ごとにON/OFFできる仕組みを考えた

Scrapboxから離れずに設定できるようにしたかったのでUserScriptで書けるようにした

code:js

$('body').attr('data-daiiz-rel-bubble', 'off'); // 関連ページを吹き出し表示する

$('body').attr('data-daiiz-text-bubble', 'on'); // リンク先ページのテキストを表示する

$('body').attr('data-daiiz-icon-button', 'on'); // アイコンをボタンにする

仕組み

MutationObserver を使って拡張機能側で data-daiiz-* 属性の変更を監視しておく

UserScriptで data-daiiz-* に対して値をセットする

拡張機能側で機能のON/OFFが切り替わる

主な機能

リンクをホバーして吹き出しを表示する